<template>
  <div>
    <h4 class="font-weight-bold py-3 mb-4">
      <span class="text-muted font-weight-light">测试模块 /</span> Page 2
    </h4>

    <!-- table controller -->
    <div class="row">
      <div class="col">
        <b-form-group>
          <b-btn variant="primary" @click="addData()">
            <span class="ion ion-md-add-circle"></span>&nbsp;&nbsp;新增
          </b-btn>
        </b-form-group>
      </div>
    </div>

    <b-card no-body header=" 测试数据" header-tag="h6" class="mb-4">
      <div class="row no-gutters row-bordered">
        <div class="demo-vertical-spacing-sm col-sm-12 p-4">

            <v-client-table 
            :data="tableData" 
            :columns="columns" 
            :options="options"
            :countVisibleFields="true">
              <template slot="edit" slot-scope="props">
                <div>
                  <b-btn variant="outline-danger borderless icon-btn" class="btn-xs" @click.prevent="remove(props.row)"><i class="ion ion-md-close"></i></b-btn>
                </div>
              </template>
              <template slot="child_row" slot-scope="props">
                <div><b>First name:</b> {{props.row.first_name}}</div>
                <div><b>Last name:</b> {{props.row.last_name}}</div>
              </template>
            </v-client-table>


            <b-modal ref="slideModal" class="modal-slide" hide-header hide-footer>
              <b-form>
                <b-form-group label="First Name">
                  <b-input type="text" v-model="newGay.first_name" placeholder="First Name" />
                </b-form-group>
                <b-form-group label="Last Name">
                  <b-input type="text" v-model="newGay.last_name" placeholder="Last Name" />
                </b-form-group>
                <b-form-group label="Company">
                  <b-textarea v-model="newGay.company" placeholder="Textarea" :rows="3" />
                </b-form-group>
                <b-form-group label="Gender">
                  <b-radio-group v-model="newGay.gender" stacked :options="genderOptions" :checked="1" />
                </b-form-group>
                <b-form-group>
                    <b-btn block variant="primary" @click="slideModalAdd()">Comfirm</b-btn>
                    <b-btn block variant="default" @click="slideModalCancel()">Cancel</b-btn>
                </b-form-group>
              </b-form>
            </b-modal>


            <sweet-modal title="系统提示" width="50%" ref="ultraWide">
              确定删除？
              <b-btn slot="button" @click="$refs.ultraWide.close()">Close</b-btn>
              <b-btn slot="button" variant="primary" 
                    @click="doRemove()" class="ml-2">OK</b-btn>
            </sweet-modal>
        </div>
      </div>

    </b-card>
  </div>
</template>

<style src="@/vendor/libs/vue-data-tables/vue-data-tables.scss" lang="scss"></style>
<style src="@/vendor/libs/sweet-modal-vue/sweet-modal-vue.scss" lang="scss"></style>

<script>
import Vue from 'vue'
import {ClientTable} from 'vue-tables-2'
import { SweetModal } from 'sweet-modal-vue'

Vue.use(ClientTable)

export default {
  name: 'page-2',
  metaInfo: {
    title: 'Page 2'
  },
   components: {
    SweetModal
  },
  data: () => ({
    tableData: [],
    columns: ['first_name', 'last_name', 'gender', 'company', 'edit'],
    options: {
      pagination: { chunk: 5 },
      sortIcon: {
        is: 'fa-sort',
        base: 'fas',
        up: 'fa-sort-up',
        down: 'fa-sort-down'
      }
    },
    newGay : {
      "first_name": "",
      "last_name": "",
      "gender": "",
      "company": ""
    },
    genderOptions: [
      { text: 'male', value: 1,checked: true },
      { text: 'female', value: 2 },
      { text: 'not sure', value: 3 }
    ],
    deleteRow: {}
  }),
  created () {
    // Fetch json data
    const req = new XMLHttpRequest()
    req.open('GET', '/static/json/table-data.json')

    req.onload = () => {
      const data = JSON.parse(req.response)

      // Add IDs for child rows functionality
      this.tableData = data.map((item, index) => {
        item['id'] = index
        return item
      })
    }

    req.send()
  },
  methods: {
    edit (row) {
      alert(`Edit: ${row.first_name} ${row.last_name}`)
    },
    remove (row) {
      //alert(`Remove: ${row.first_name} ${row.last_name}`)
      this.$refs.ultraWide.open()
      this.deleteRow = row
    },
    doRemove () {
      let _tableData = this.tableData
      let _deleteRow = this.deleteRow
      _tableData.splice(_tableData.findIndex(item => item.first_name === _deleteRow.first_name), 1)
      this.$refs.ultraWide.close()
    },
    addData () {
      this.$refs.slideModal.show()
    },
    hideSlideModal () {
      this.$refs.slideModal.hide()
    },
    slideModalAdd () {
      this.tableData.unshift(this.newGay)
      this.hideSlideModal()
    },
    slideModalCancel () {
      this.newGay = {
        "first_name": "",
        "last_name": "",
        "gender": "",
        "company": ""
      }
      this.hideSlideModal()
    }
  }
}
</script>
